Week 1: Project Management

Introduction

During the first week of the Fab Academy, we focused on project management. This included setting up a personal website for documentation, learning about version control using Git, and organizing our workflow efficiently. Proper documentation is crucial to track progress and document everything done so one can always come back if any confusion occurs.


Note: This website was created a bit late and quite a lot of chatgpt was used though I will highlight the important snippets of code if anyone wants to replicate the process.

Website Creation

I created my personal documentation website using basic HTML, CSS, and JavaScript.HTML defines the structure and content of a web page, CSS styles that content to make it visually appealing, and JavaScript adds interactivity and dynamic behavior like animations or form handling. I edited my pages in a text editor called Visual Studio Code which allowed me to have everything in one place. The design is inspired by cyberpunk aesthetics, and I’ve kept it modular so I can easily update it every week. The main page contains css and javascript but the weekly assignments and others only contain HTML and CSS, Here I will highlight the process of using chatpgt for the creation of this website. Since I used chatpgt and didn't have the premium version there was a lot of account switching since after some time the prompts would get maxed out and I would have to switch accounts which was a bit annoying and therefore I don't have all the prompts and revisions I did but I will try to hightlight the main ones.

Chatgpt 🤖

I started out with the matrix rain since that was the main thing I knew I wanted for the website. It gave me html,css and javascript for that. After which I told it that I was making a documentation forfab academy and I wanted a website that had a watch dogs x cyberpunkish vibe to it and there being folders for each weeks assignments. This is the result.

Website

However, I didn’t like it very much. But had to change accounts so had to kind of tell it again.

Prompt: I am trying to make documentation for fab academy but currently the website looks empty and not what I was hoping for. I am going for cyberpunkish x watch dogs themed website but I don't know what to add to make it feel more full.

Then a long exchange went on as chatgpt isn’t perfect and it gave code that wasn’t working properly and so there few revisions to the code to get it working properly.Also, my original plan was to have some a dedsec gif on the top of the page but for some reason it wasn't working as the gif didn't properly fit in the page and just looked weird. Therefore, I decided abandon the top of the page gif idea. I didn’t take pictures of what it looked like after all the changes.

Prompt: its almost good. Few more changes. Remove the sidebar. Instead, on top of the page,have a navigation bar where only two folder are required for about me and a final project one, make its style similar to the page. Make the gif fit the page properly now as some of it wasn't visible. Also, the folder icon disappeared in this code.

Prompt: Everything is almost perfect. Can you just re arrange the assignments folder so they are one after the other like in the website I showed you

Website

However, I felt the website looked slighty empty below so I asked chatpgt about some ideas

Prompt:it now looks very good. Can you just suggest something so it doesn't look as empty below as well

It suggested to have an animated footer. I thought it was a good idea and so I went ahead and did that. I liked the result and had the max payne gifs added at the bottom


For my individual documentation I had a plan for going simple and I had just added a colour to the page and went ahead and started documenting.

Individual Documentation

However, once the main page had been constructed I wanted the assignment page to look similar as well. Therefore I uploaded the pic of my current website and asked for how it could look similar

Prompt: This is what it looks like right now. How can I change it to fit the main website's designs

I asked for it to make the suggested changes and uploaded the html code for the website i was using to it. My new website looked like the below:

Individual Documentation

Once this was done, I made some changes here and there like I added glowing borders, some styling and a kind of a header to go back to the main page but this was most of it.


Using GIFs

Each weekly assingment contains a random gif that I like on a website called on tenor. I used CSS to make gifs a certain size and fit there for each individual weekly assignment. I also used a gif for the main heading of the page which says "Welcome to my profile".

Cyberpunk GIF Cyberpunk GIF GIF

The following is the CSS I used for the "welcome-to-my-profile"


                    .gif-banner {
                        background: url('fab lab pics/fab_pics/main/saturday-welcome-to-my-profile.gif') no-repeat center center;
                        background-size: cover;
                        height: 500px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        position: relative;
                        margin-top: 50px;
                    }
                    
                    .gif-banner h1 {
                        font-size: 48px;
                        color: #ff00ff;
                        text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff;
                    }

Another use of gifs I did was in the bottom of the page in the form of an animated footer I used gif texts from a game called max Payne 3 from a website. I used javasript to have the effects of the floating gifs at the bottom of the page. The gifs due to being directly linked ended up showing up as true gifs in the code snippet 😅 but the gifs are linked as images with direct links from the website.


                    // Animated Footer with GIFs
                    document.body.insertAdjacentHTML("beforeend", `
                        
                    `);
                    
                    
                    const animatedFooter = document.getElementById("animated-footer");
                    animatedFooter.style.position = "fixed";
                    animatedFooter.style.bottom = "0";
                    animatedFooter.style.width = "100%";
                    animatedFooter.style.display = "flex";
                    animatedFooter.style.justifyContent = "center";
                    animatedFooter.style.background = "black";
                    animatedFooter.style.padding = "10px 0";
                    animatedFooter.style.overflow = "hidden";
                    
                    const footerImages = animatedFooter.getElementsByTagName("img");
                    for (let img of footerImages) {
                        img.style.height = "50px";
                        img.style.margin = "0 10px";
                    }

Matrix Rain

One of my favourite things I wanted to do for the website was to have this matrix rain effect and for that effect, I used a JavaScript code snippet that creates a falling text effect. The code is as follows:


                        const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()_+-=<>?";
                        const font_size = 14;
                        const columns = Math.floor(canvas.width / font_size);
                        const drops = Array(columns).fill(0);
                        
                        function drawMatrixRain() {
                            ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
                            ctx.fillRect(0, 0, canvas.width, canvas.height);
                            ctx.fillStyle = "#00ff99";
                            ctx.font = font_size + "px monospace";
                            for (let i = 0; i < drops.length; i++) {
                                const text = characters[Math.floor(Math.random() * characters.length)];
                                ctx.fillText(text, i * font_size, drops[i] * font_size);
                                if (drops[i] * font_size > canvas.height && Math.random() > 0.975) {
                                    drops[i] = 0;
                                }
                                drops[i]++;
                            }
                        }
                        setInterval(drawMatrixRain, 30);

Tools used

Git and Gitlab

Git is a version control system that tracks changes in code and enables collaboration, while GitLab is an online platform where Git repositories are hosted and managed, including tools for CI/CD and website deployment with GitLab Pages.

For Fab academy/Fab courses we have to document weekly what we did and that documentation is then part of a website where anyone can view it. Gitlab is used for hosting the website and we use git to push any changes we make on our computer.

To make the changes to the gitlab repository we use an ssh key pair.SSH key pairs provide secure authentication between your computer and GitLab without using a password—your private key stays on your device, and your public key is uploaded to GitLab to verify your identity.

Git Commands Reference

git init
Initializes a new Git repository in the current directory.
git clone url
Clones a remote repository to your local machine.
git status
Shows the current state of the repository, including any changes that haven't been staged for commit.
git add file
Stages changes to a specific file (or all files) in preparation for a commit.
git commit -m "message"
Commits the staged changes with a descriptive message.
git push
Pushes your local commits to a remote repository (e.g., GitHub or GitLab).
git pull
Fetches and merges changes from the remote repository to your local repository.
git log
Displays the commit history of the current branch, showing commit messages, authors, and timestamps.
git branch
Lists all branches in the repository or creates a new branch if you add a branch name.
git merge branch-name
Merges the specified branch into the current branch.
git checkout branch-name
Switches to the specified branch.

Using and Downloading Git

I downloaded Git from git-scm.com and installed it on my machine. Now here what happened was that I set everything up the first time and I updated my windows which caused the git ssh key to dissapear so I could not push my changes. I had to go through the process of creating a new ssh key and adding it to my gitlab account again. This time I also ended up creating my own website instead of using the one provided by the fab academy which led to a small issue of not being able to push my changes to the website. I had to create a new branch which I called "matrix", subtle I know and used that as my main branch to push my changes to the website. This was quite a hassle as this was my first time doing this and after an hour of trying to troubleshot the issue with my friend chatgpt I was able to finally deploy my website.

I first created my ssh key which I then copied online to gitlab.

SSH Key Gitlab SSH Key

Quick test to see if the key was working

SSH Test

Then I set up a username and user email

Git Config

Afterwards, Once I tried to push everything to the main branch it didn't let me do it and so I ended up creating a new branch

Git Branch

I then deleted everything that came in the new branch which was the standard fab academy website

Git Branch

Finally, I then pushed my changes to the new branch.

Git Push

However, Once the changes had been pushed I went to gitlab and saw nothing. I then began my trouble shooting process to find out the error.

I found out I have to change the name of the branch in gitlab yml file which I changed to my current one which was "matrix". The gitlab yml file contains instructions on how to deploy our project so it won't work without proper changes.

Gitlab YML

However, I still couldn't find my page and then checked the CI/CD pipelines and there I could see a new job but my page wasn't visible. After like 40 min I spotted my issue which was my file name. In gitlab for it to recognize a page it has to be named index.html while mine was fab.html. I changed the name locally and pushed the changes and then after like 10 min there was page url in pages 🙂.

Final Project Discussion

Final Project Idea

For my Fab Academy project, I want to build a smart assistant device using an ESP32. This assistant will recognize voice commands, respond using a custom voice (like Darth Vader or TARS), show dynamic emoticon expressions on side displays, and present useful information like the weather, calendar tasks, and Pomodoro timer updates on a central screen. It will connect to my laptop over Wi-Fi to access an LLM, calendar, and Spotify control, while also offering offline functionality for basic features. I want the device to feel interactive and alive, with expressive visuals and audio responses, all housed in a custom-designed casing. This project will be quite electronics and software heavy but this is something I am looking forward as this is kinda my own unique idea though inspired from different movies and stuff and there is a good chance I might not be able to finish it in time as there is a lot of learning but I will try my best to do so.

Hardware Components

Software Components